<template>
    <div>
        <!-- 自定义表单组件 -->
        <button @click="btnClick">hyinput按钮</button>
        <h2>HYInput的message {{modelValue}}</h2>
        <!-- 组件中使用input -->
        <p>组件中使用input</p>
        <input :value="modelValue" @input="btnClick2" />

        <!-- 如何让input用model,这种不能改变父组件的modelValue即msg,应为props传过来的时候,父组件的数据就不会改变了 -->
        <!-- <input v-model="modelValue"> -->

        <!-- 使用computed实现,双向绑定 -->
        <input v-model="value"/>

    </div>
</template>

<script>
    export default {
        props: {
            modelValue: {
                type: String,
            },
        },
        emits:["update:modelValue"],
        computed:{
            value:{
                get(){
                    return this.modelValue
                },
                set(value){
                    this.$emit("update:modelValue",value)
                }
            }
        },
        methods: {
            btnClick() {
                this.$emit("update:modelValue","123123")
                // 第二个参数是赋值给modelValue的值
            },
            btnClick2(event){
                this.$emit("update:modelValue",event.target.value)

            }
        },
    }
</script>

<style lang="scss" scoped>

</style>